<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataRyfh } from "@/api/search";
import { addOrUpdateRyfh } from "@/api/addOrUpdate";

const city = window.globalObj.name;
const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();
const editorRef3 = shallowRef();
const editorRef4 = shallowRef();

const toolbarConfig = {};
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const toolbarConfig3 = {};
const toolbarConfig4 = {};

const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");
const mode3 = ref("default");
const mode4 = ref("default");

// 加载html
const initHtml = () => {
  searchDataRyfh({ m: "原则要求" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "预警报知")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "人员疏散")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "人员掩蔽")?.v || "";
    valueHtml3.value = data.find((x) => x.k === "人员救护")?.v || "";
    valueHtml4.value = data.find((x) => x.k === "人员保障")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};
const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};
const handleCreated3 = (editor) => {
  editorRef3.value = editor; // 记录 editor 实例，重要！
};
const handleCreated4 = (editor) => {
  editorRef4.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "行动原则：按照实时接收、迅速报知、准确传递、科学分析的原则，在全面掌握空情的基础上，分清主次缓急，对主要目标、主要方向的情况优先报知；及时提供预警信息，加强对重要目标、主要方向的接收，采取多种手段，保障防空袭斗争需要。<br/>具体要求：战时县（区）人防指挥所均应按照上级部署要求接入空情预警信息系统，进入等级战备后24小时值守，确保随时接收、传达空情预警信息；警报系统实现主城区全覆盖，进入一级战备后，主控部位24小时值守，可依令实时、同步发出空袭警报。"
);

const valueHtml1 = ref(
  "行动原则：人口疏散以人防重点城市为主组织实施，坚持“条块结合，以块为主，分期分批”的原则。<br/>具体要求：各街道要按早期疏散、临战疏散、紧急疏散三个阶段，确定疏散编组方案，分批次列出具体疏散人员清单、召集人、集合地点、乘座车辆、疏散地域，并列出疏散人员携行、运行物资清单，确保人员可随时依令快速有序疏散。"
);

const valueHtml2 = ref(
  "行动原则：统一指挥，统一行动，周密计划，严密组织，统筹兼顾，保证重点。<br/>具体要求：按照徒步就地就近，先人防工程、再普通地下室、后空旷地带和应急避难场所，按“定单位、定人员、定路线、定出入口、定位置、定引导员”的“六定”要求组织实施，直接引导需要掩蔽的人员快速进入人员防护工程。"
);

const valueHtml3 = ref(
  "行动原则：按照市人民防空指挥部指令，组建医疗队编组力量，快速到位、快速展开，确保随时执行医疗救护任务。<br/>具体要求：以公立医院为骨干，组建医疗救护专业队；除后方医院和地下医院等固定机构外，组建以医务人员为主并配备一定数量担架队伍的机动医疗救护队。各级医疗救护专业队，适时进行临战训练；组织医疗救护专业队、防化防疫专业队展开紧急救护和防疫；配备简易急救和防疫器材、培训救护技能，组织开展自救互救和群众性防疫工作。"
);

const valueHtml4 = ref(
  "行动原则：以个人携行保障与分区计划保障相结合的原则组织实施，分区计划保障按有偿服务与无偿救助相结合的原则组织实施，确保所有人员均能得到应有的基本生活保障。<br/>具体要求：县（区）指挥部按照市级统一指挥调度，由街道（乡镇）、社区（村屯）协调专供机构适情采取定点供应、专业配送，或组织志愿者配送的方式组织实施。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateRyfh({
      m: "原则要求",
      data: [
        {
          k: "预警报知",
          v: valueHtml.value,
        },
        {
          k: "人员疏散",
          v: valueHtml1.value,
        },
        {
          k: "人员掩蔽",
          v: valueHtml2.value,
        },
        {
          k: "人员救护",
          v: valueHtml3.value,
        },
        {
          k: "人员保障",
          v: valueHtml4.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  const editor3 = editorRef3.value;
  const editor4 = editorRef4.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  if (!editor3) return;
  if (!editor4) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
  editor3.destroy();
  editor4.destroy();
});
</script>
<template>
  <div class="">
    <div>主要明确预警和人员疏散、掩蔽、救护、保障的行动原则和具体要求。</div>
    <FirstTitle name="预警报知" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="人员疏散" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="人员掩蔽" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <FirstTitle name="人员救护" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef3"
        :defaultConfig="toolbarConfig3"
        :mode="mode3"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml3"
        :defaultConfig="editorConfig"
        :mode="mode3"
        @onCreated="handleCreated3"
      />
    </div>

    <FirstTitle name="人员保障" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef4"
        :defaultConfig="toolbarConfig4"
        :mode="mode4"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml4"
        :defaultConfig="editorConfig"
        :mode="mode4"
        @onCreated="handleCreated4"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>